<script setup>
import { ref, onMounted } from 'vue';
import { getTagList } from "@/api/tag.js";
import { closeToast, showLoadingToast, showToast } from "vant";
import {updateUserTag, userTagList} from "@/api/user.js";

const onClickLeft = () => history.back();

/**
 * 标签表单
 */
const tagForm = ref([]);
const activeName = ref([]);
const activeIndex = ref(0);
const items = ref([]);

// 更新标签表单
const updateTagForm = () => {
  tagForm.value = items.value.flatMap(group =>
    group.children.filter(child => activeName.value.includes(child.text))
  );
};

/**
 * 获取标签
 */
const getTags = async () => {
  showLoadingToast({
    message: '加载中...',
    duration: 0,
    forbidClick: true,
  });
  try {
    const res = await getTagList();
    if (res.data.code === 1) {
      items.value = res.data.data.map(group => ({
        ...group,
        children: group.children.map(child => ({
          ...child,
          id: child.text // 使用标签名作为 ID
        }))
      }));
      updateTagForm(); // 在获取标签后更新标签表单
      closeToast();
    } else {
      showToast("获取标签失败，请稍后再试！");
    }
  } catch (err) {
    console.error(err);
  }
};

/**
 * 获取用户的标签
 */
const getUserTags = async () => {
  try {
    const res = await userTagList();
    if (res.data.code === 1) {
      activeName.value = res.data.data.map(tag => tag.text);
      updateTagForm(); // 更新标签表单以显示用户的标签
    } else {
      showToast("获取用户标签失败，请稍后再试！");
    }
  } catch (err) {
    console.error(err);
  }
};

/**
 * 修改个人标签
 */
const updateUserTags = () => {

  const tags = tagForm.value.map(tag => tag.text);
  updateUserTag(tags).then(res => {
    if (res.data.code === 1) {
      showToast("修改成功！");
    } else {
      showToast(res.data.msg);
    }
  }).catch(err => {
    console.error(err);
  });
}

// 在组件挂载时获取标签和用户标签
onMounted(() => {
  getTags();
  getUserTags();
});
</script>

<template>
  <div class="tag-page">
    <van-nav-bar
      fixed
      left-arrow
      left-text="返回"
      placeholder
      right-text="就这些"
      title="标签"
      @click-left="onClickLeft"
      @click-right="updateUserTags"
    />
    <div class="tag-container">
      <div class="tag-search">
        <span v-if="tagForm.length === 0" class="tag-search-placeholder">从下方选择适合自己的标签吧！</span>
        <span v-else class="tag">
          <van-tag v-for="(tag, index) in tagForm" :key="index" class="tag-item" size="medium" type="primary">
            {{ tag.text }}
          </van-tag>
        </span>
      </div>
    </div>
    <van-empty v-if="items.length === 0" description="暂时没有标签哦~"/>
    <van-tree-select
      v-else
      v-model:active-id="activeName"
      v-model:main-active-index="activeIndex"
      :items="items"
      height="auto"
      @click-item="updateTagForm"
    />
  </div>
</template>

<style scoped>
.tag-container {
  padding: 10px;
  background-color: #ffffff;
}

.tag-search {
  background-color: #f1f1f1;
  padding: 2px;
  border-radius: 2px;
}

.tag-search .tag-search-placeholder, .tag-search .tag {
  height: 30px;
  line-height: 30px;
  color: #9e9e9e;
}

.tag-search .tag .tag-item {
  margin: 3px;
}
</style>
